/*
 * @Title: 底部菜单
 * @Created by: ycq 
 */
<template>
	<view id="bottom" class="foot-menu">
		<view class="foot-menu-area">
			<view class="foot-menu-item" v-for="(nav,index) in menuData" :key='index' @click='chooseMenu(nav.url,index)' >
				<view class="foot-menu-img">
					<img v-if='pageType != index'  :src='nav.img' alt=""  >
					<img v-if='pageType == index'  :src='nav.imga' alt=""  >
				</view>
				<span :class="pageType == index ? 'active':''">{{nav.name}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	console.log('')
	export default{
		props: ['navIndex'],
		data(){
			return{
				tabbar: true,
				windowHeight: '',
				pageType:0,
				isActive:false,
				menuData:[
					{	
						id:0,
						name:'首页',
						img:'/static/home.png',
						imga:'/static/home-a.png',
						url:'/pages/home/home',
					},
					{
						id:1,
						name:'攻略',
						img:'/static/gonglue.png',
						imga:'/static/gonglue-a.png',
						url:'/pages/gonglue/gonglue',
					},
					{
						id:2,
						name:'驴友圈',
						img:'/static/lvyouquan.png',
						imga:'/static/lvyouquan-a.png',
						url:'/pages/lvyouquan/lvyouquan',
					},
					{
						id:3,
						name:'活动',
						img:'/static/huodong.png',
						imga:'/static/huodong-a.png',
						url:'/pages/huodong/huodong',
					},
					{
						id:4,
						name:'我的',
						img:'/static/my.png',
						imga:'/static/my-a.png',
						url:'/pages/my/myFirst/mine',
					}
				]
			}
		},
		methods:{
			chooseMenu(path,index){
				this.pageType = index
				uni.switchTab({url: path})
			}
		},
		created() {
			if(this.navIndex!=''||this.navIndex!=null){
				this.pageType = this.navIndex
			}
		}
		
	}
</script>

<style scoped>
	.foot-menu{
		width: 100%;
		height: 98upx;
		background: #FFFFFF;
		border-top: rgba(0,0,0,0.1) solid 0.5upx;
		position: fixed;
		z-index: 30;
		bottom: 0;
	}
	.foot-menu-area{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction:row
	}
	.foot-menu-item{
		width: 100%;
		padding: 2vw 0;
		text-align: center;
	}
	.foot-menu-item img{
		width: 51upx;
		height: 51upx;
	}
	.foot-menu-item span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 3vw;
	}
	.active{
		color: #1C8EFF;
	}
	.foot-menu-img{
		width: 100%;
		height: 50upx;
	}
</style>
